<template>
  <div class="form-input">
    <div>
      <b-form @submit="onSubmit" @reset="onReset" v-if="show" autocomplete="off">
        <!-- user name -->
        <b-form-group
          id="input-group-username"
          label="用户名:"
          label-for="input-name"
          :state="stateName"
          :invalid-feedback="invalidFeedbackName"
        >
          <b-form-input
            :state="stateName"
            id="input-name"
            v-model="form.strUsrName"
            required
            placeholder="Enter name"
          ></b-form-input>
        </b-form-group>

        <!-- password -->
        <b-form-group
          id="input-group-password"
          label="密码:"
          label-for="input-pw"
          :invalid-feedback="invalidFeedbackPassword"
          :state="statePassword"
        >
          <b-form-input
            :state="statePassword"
            id="input-pw"
            v-model="form.strPassword"
            type="password"
            required
            placeholder="Enter Password"
          ></b-form-input>
        </b-form-group>

        <!-- button area -->
        <b-button class="m-right-20" type="submit" variant="primary">提交</b-button>
        <b-button type="reset" variant="danger">重置</b-button>
        <b-button variant="default" class="fr">忘记密码</b-button>
      </b-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "miniform-input",
  data() {
    return {
      form: {
        strUsrName: "",
        strPassword: "",
        strPasswordCheck: "",
        strOrganization: "",
        strEmail: "",
        strTel: ""
      },

      show: true
    };
  },
  computed: {
    /* password */
    statePassword() {
      if (!!this.form.strPassword) {
        return this.form.strPassword.length >= 8 &&
          this.form.strPassword.length <= 20
          ? true
          : false;
      } else {
        return null;
      }
    },
    invalidFeedbackPassword() {
      if (this.form.strPassword.length == 0) {
        return "";
      } else if (this.form.strPassword.length < 8) {
        return "密码长度不可小于 8 位";
      } else {
        return "密码长度不可超过 12 位";
      }
    },
    /* user name */
    stateName() {
      if (!!this.form.strUsrName) {
        return this.form.strUsrName.length <= 16 ? true : false;
      } else {
        return null;
      }
    },
    invalidFeedbackName() {
      return "用户名长度不可超过16位";
    }
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
      console.log(this.form);
    },
    onReset(evt) {
      evt.preventDefault();
      // Reset our form values
      this.form.strUsrName = "";
      this.form.strPassword = "";
      // Trick to reset/clear native browser form validation state
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.m-right-20 {
  margin-right: 20px;
}

.fr {
  float: right;
  text-decoration: underline;
}

.fr:hover{
    color: #007bff;
}
</style>



